<script setup lang="ts">
import {ref} from "vue"
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { useStaffsStore } from '../../../store/useStaffsStore';
import { notification } from 'ant-design-vue';
import type { NotificationPlacement } from 'ant-design-vue';

const StaffsStore = useStaffsStore()

// 添加成功弹窗
const addOk = (placement: NotificationPlacement) => {
  notification.open({
    message: "添加员工成功",
    description:
      '',
    placement,
    duration:1,
    class:"notification"
  });
};

// 添加失败弹窗
const addNo = (placement: NotificationPlacement) => {
  notification.open({
    message: "添加员工失败",
    description:
      '',
    placement,
    duration:1,
    class:"notification"
  });
};


const Data = ref({
    name:'',
    department:'',
    position:'',
    phone:'',
    address:'',
    jobTime:''
})

const addStaff = ()=>{
    //判断表单是否填满
    if(Data.value.name === '' || Data.value.department === '' || Data.value.position === '' || Data.value.phone === '' || Data.value.address === '' || Data.value.jobTime === ''){
        addNo('top')
        return
    }
    StaffsStore.addStaff(Data.value)
    addOk('top')
    //清空表单
    Data.value = {name:'',department:'',position:'',phone:'',address:'',jobTime:''}
}

</script>

<template>
    <div class="l">
        <div class="form">
             <!-- 表单信息 -->
            <form action="" class="ml-11">
                <div class="my-2.5 form-item">
                    <label for="name">姓名：</label>
                    <input type="text" v-model="Data.name" class="bg-white focus:outline-none rounded-md pl-2  ml-7 input-size">
                </div>
                <div class="my-2.5 form-item">
                    <label for="name">所属部门：</label>
                    <input type="text" v-model="Data.department" class="bg-white focus:outline-none rounded-md pl-2  input-size">
                </div>
                <div class="my-2.5 form-item">
                    <label for="name">职位：</label>
                    <input type="text" v-model="Data.position" class="bg-white focus:outline-none rounded-md pl-2  ml-7 input-size">
                </div>
                <div class="my-2.5 form-item">
                    <label for="name">电话：</label>
                    <input type="text" v-model="Data.phone" class="bg-white focus:outline-none rounded-md pl-2  ml-7 input-size">
                </div>
                <div class="my-2.5 form-item">
                    <label for="name">地址：</label>
                    <input type="text" v-model="Data.address" class="bg-white focus:outline-none rounded-md pl-2 ml-7 input-size">
                </div>
                <div class="my-2.5 form-item">
                    <label for="name">入职时间：</label>
                    <a-config-provider :locale="zhCN">
                      <a-space direction="vertical" :size="12">
                        <a-date-picker v-model:value="Data.jobTime" value-format="YYYY-MM-DD" format="YYYY-MM-DD" class="input-size" />
                      </a-space>
                    </a-config-provider>
                </div>
            </form>
        </div>
        <div class="submit">
            <a-button type="primary" size="large" class="input-button" @click="addStaff" >添加员工</a-button>
        </div>
    </div>
</template>

<style scoped>
.l{
    margin-top:1vh;
    padding-top:1vh;
    width:75vw;
    min-height: 70vh;
    background: linear-gradient(to bottom, #6ef7e4, #FFFFFF);
    display: flex;
    align-items: center;
    flex-direction: column;
}
.form{
    width:40%;
    height: 40vh;
    padding-top:1vh;
    padding-left:3vw;
}
.form-item{
    margin-top: 3vh;
    width:60%;
    display: flex;
    justify-content: space-between;
}
.input-size{
    width:10vw;
    height:3vh;
}
.submit{
    width:40%;
    display: flex;
    justify-content: center;
    margin-top:5vh;
}
.input-button{
    background-color: #7dfceb;
}
.notification{
    background-color: skyblue;
}
</style>